Angular Services ব্যবহারের মাধ্যমে আপনি অ্যাপ্লিকেশনের মধ্যে ডেটা ম্যানেজমেন্ট, API কল, বা অন্যান্য লজিকাল কাজ সহজে পরিচালনা করতে পারেন। Data Service একটি সাধারণ Angular Service যা ডেটা প্রক্রিয়াকরণ এবং সরবরাহের জন্য ব্যবহৃত হয়।

এখানে আমরা একটি Data Service তৈরি করব যা API থেকে ডেটা ফেচ করবে এবং সেই ডেটাকে Angular কম্পোনেন্টে প্রদর্শন করবে। এই প্রক্রিয়ায় আমরা HTTP ক্লায়েন্ট (HTTP Client) ব্যবহার করব যা Angular এর HttpClientModule এর অংশ।

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন, যদি আপনার আগে থেকেই কোনো প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন।

ng new data-service-demo
cd data-service-demo

Step 2: HttpClientModule ইমপোর্ট করা

এখন, Angular HttpClient এর মাধ্যমে API কল করার জন্য HttpClientModule কে app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';  // HttpClientModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule  // HttpClientModule যোগ করা হয়েছে
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Data Service তৈরি করা

এখন, একটি Data Service তৈরি করুন যা API থেকে ডেটা ফেচ করবে।

ng generate service data

এটি একটি data.service.ts ফাইল তৈরি করবে। নিচে একটি সাধারণ Data Service উদাহরণ দেওয়া হলো, যেখানে আমরা HttpClient ব্যবহার করে API থেকে ডেটা ফেচ করব।

data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';  // HttpClient ইমপোর্ট
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'  // Service গ্লোবালি অ্যাক্সেসযোগ্য
})
export class DataService {

  // API URL
  private apiUrl = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) { }

  // Get data from API
  getData(): Observable<any> {
    return this.http.get<any>(this.apiUrl);  // HTTP GET রিকোয়েস্ট
  }
}

এখানে, getData() মেথডটি একটি HTTP GET রিকোয়েস্ট পাঠাবে এবং Observable রিটার্ন করবে, যা পরে কম্পোনেন্টে সাবস্ক্রাইব করা যাবে।

Step 4: কম্পোনেন্টে Data Service ব্যবহার করা

এখন, আমাদের Data Service কম্পোনেন্টে ব্যবহার করতে হবে। প্রথমে, app.component.ts ফাইলে DataService ইমপোর্ট করুন এবং getData() মেথড কল করুন।

app.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';  // DataService ইমপোর্ট

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'Angular Data Service Example';
  data: any[] = [];  // Data variable to store the fetched data

  constructor(private dataService: DataService) { }

  ngOnInit() {
    // Calling the service method to fetch data
    this.dataService.getData().subscribe(
      (response) => {
        this.data = response;  // Storing the fetched data
      },
      (error) => {
        console.error('Error fetching data', error);  // Error handling
      }
    );
  }
}

এখানে, ngOnInit() lifecycle হুক ব্যবহার করা হয়েছে, যা কম্পোনেন্ট লোড হলে getData() মেথড কল করে ডেটা ফেচ করবে এবং সেই ডেটাকে data ভ্যারিয়েবলে স্টোর করবে।

Step 5: HTML ফাইলে ডেটা প্রদর্শন করা

এখন, app.component.html ফাইলে ডেটা প্রদর্শন করতে হবে। আমরা ডেটাকে একটি তালিকা আকারে প্রদর্শন করব।

app.component.html

<h1>{{ title }}</h1>

<!-- Display fetched data -->
<ul>
  <li *ngFor="let user of data">
    {{ user.name }} - {{ user.email }}  <!-- Displaying name and email -->
  </li>
</ul>

এখানে, ngFor ডিরেক্টিভ ব্যবহার করে আমরা data অ্যারে থেকে প্রতিটি ইউজারের নাম এবং ইমেইল দেখাচ্ছি।

Step 6: অ্যাপ্লিকেশন চালানো

এখন, Angular অ্যাপ্লিকেশন চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনার ব্রাউজারে গিয়ে আপনি API থেকে ফেচ করা ডেটা দেখতে পারবেন।

সারাংশ

এই প্রক্রিয়ায়, আমরা Angular এর মাধ্যমে Data Service তৈরি করেছি যা API থেকে ডেটা ফেচ করে এবং সেটি কম্পোনেন্টে প্রদর্শন করে। HttpClient ব্যবহার করে API কল করার মাধ্যমে Angular অ্যাপ্লিকেশনে ডেটা ইন্টারঅ্যাকশন করা যায়। Observable এর মাধ্যমে ডেটা আসলে subscribe করে সেই ডেটাকে কম্পোনেন্টে প্রদর্শন করা যায়। Data Service ব্যবহার করে ডেটা ম্যানেজমেন্ট এবং API কল করা আরও সহজ হয়ে ওঠে।